<template>
	<view class="container">
		<u-sticky class="container__sticky">
			<view >
				<view class="container__sticky__draw-ul">
					<view class="container__sticky__draw-ul__title"><text>{{drawprize.title}} - {{drawprize.issue}}期：</text>
						<view class="text-right container__sticky__draw-ul__more" @click="checkRoute('pages/index/drawprize',{'alias':drawprize.alias})">历史记录<u-icon name="arrow-right-double" size="14"  style="float:right;font-weight: bold;"></u-icon></view>
					</view>
					<template v-for="(vl,vk) in drawprize.open_code">
						<view :key="vk">
							<view  v-if="vk===6" class="container__sticky__draw-ul__li container__sticky__draw-ul__jia">
								+
							</view>
							<view class="container__sticky__draw-ul__li" >
								<view><view class="container__sticky__draw-ul__li__code" :class="'nub-color-'+vl.color">{{vl.nub}}</view></view>
								<view>{{vl.title}}</view>
							</view>
						</view>
					</template>
				</view>
				<view class="container__sticky__down-ul">
					<view class="container__sticky__down-ul__left">第 <text class="lhc__header__info__issue"> {{nextIssue}} </text> 期开奖剩余</view>
					<view class="container__sticky__down-ul__right">
						<u-count-down
								:time="parseInt(kaijiang) * 1000"
								format="DD:HH:mm:ss"
								autoStart
								millisecond
								@change="onChange"
								@finish="onFinish"
							>
								<view class="time">
									<text class="time__item" v-if="timeData.days > 0">{{ timeData.days }}&nbsp;天</text>
									<text class="time__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}&nbsp;时</text>
									<text class="time__item">{{ timeData.minutes>=10 ? timeData.minutes : '0'+timeData.minutes }}&nbsp;分</text>
									<text class="time__item">{{ timeData.seconds>=10 ? timeData.seconds : '0' + timeData.seconds  }}&nbsp;秒</text>
								</view>
							</u-count-down>
					</view>
				</view>
			</view>
			
		</u-sticky>
		
		<view class="container-row">
			<u-row justify="space-between" align="top">
				<u-col span="3">
					<scroll-view scroll-y="true" class="lhc__rule-left">
						<u-collapse :border="false" :value="[rulesInfo.pid]">
							<u-collapse-item v-for="(item,inx) in rules" :key="inx" :title="item.title" :name="item.alias" :border="false" >
								<view class="container__nav" :class="{'container__nav_active':(rulesInfo.alias == vl.alias)}" v-for="(vl,vk) in item.children" :key="vk" @click="checkChildrenNav(vl)">{{vl.title}}</view>
							</u-collapse-item>
						</u-collapse>
					</scroll-view>
				</u-col>
				<u-col span="8">
					<scroll-view scroll-y="true" class="lhc__rule-right">
						<view v-if="rulesInfo.alias == 'TeMaZhiXuan'">
							<u-subsection :list="subsectionList" :current="subsectionActive" @change="sectionChange"></u-subsection>
							<number-view v-if="subsectionActive===0" :ball="config.ball" :isAddOrder="isAddOrder" :rulesInfo="rulesInfo" @click="onsubmitOrder"></number-view>
							<two-sides-view v-if="subsectionActive===1" :ball="config.ball" :zodiac="config.shengxiao" :config="config" :isAddOrder="isAddOrder" :rulesInfo="rulesInfo" @click="onsubmitOrder"></two-sides-view>
							<analysis-view v-if="subsectionActive===2" :ball="config.ball" :zodiac="config.shengxiao" :isAddOrder="isAddOrder" :rulesInfo="rulesInfo" @click="onsubmitOrder"></analysis-view>
						</view>
						<view v-else-if="rulesInfo.is_nub == 1">
							<liangmian-view :isAddOrder="isAddOrder" :rulesInfo="rulesInfo" @click="onsubmitOrder"></liangmian-view>
						</view>
						<view v-else-if="rulesInfo.is_nub == 2">
							<number-view  :ball="config.ball" :isAddOrder="isAddOrder" :rulesInfo="rulesInfo" @click="onsubmitOrder"></number-view>
						</view>
						<view v-else-if="rulesInfo.is_nub == 3">
							<zodiac-view :zodiac="config.zodiac" :isAddOrder="isAddOrder" :rulesInfo="rulesInfo" @click="onsubmitOrder"></zodiac-view>
						</view>
					</scroll-view>
				</u-col>
			</u-row>
		</view>
		
		<settle-view :orderList="orderList" :id="category.id" :issue="nextIssue" @onAddOrder="onAddOrder" @onsumlit="onsumlit"></settle-view>
	</view>
</template>

<script>
	import {getLastDrawprizeInfo,getCategoryInfo,getRules,getDrawprizeInfo} from '@/api/lottery.js'
	import {randomNuber} from '@/utils/utils.js'
	import NumberView from './src/number.vue'
	import TwoSidesView from './src/two_sides.vue'
	import AnalysisView from './src/analysis.vue'
	import SettleView from './com/settle.vue'
	import LiangmianView from './src/liangmian.vue'
	import ZodiacView from './src/zodiac.vue'
	export default {
		components:{NumberView,TwoSidesView,AnalysisView,LiangmianView,ZodiacView,SettleView},
		data() {
			return {
				list:[],
				drawprize:[],
				tabIndex:0,
				subsectionList:['特码选号','两面选号','文本解析'],
				nextNumber:0,
				nextIssue:0,
				typeid:'lhc',
				lotteryAlias:'XinXiLanLiuHeCai',
				rulesActive:"TeMaZhiXuan",
				subsectionActive:0,
				kaijiang:0,
				timeData: {},
				rulesInfo:{},
				rules:[],
				category:{},
				config:{},
				isAddOrder:false,
				orderList:[]
			}
		},
		onLoad(opt){
			if(!opt.alias || !opt.typeid) {
				return false;
			}
			this.lotteryAlias = opt.alias;
			this.typeid = opt.typeid;
			this.initInfo();
			this.initCategory();
			this.initRules();
		},
		watch:{
			tabIndex(val){
				this.lotteryList();
			}
		},
		methods: {
			initInfo(){
				getLastDrawprizeInfo({alias:this.lotteryAlias}).then(res=>{
					if(res.code === 200) {
						this.drawprize = res.data.info;
						this.nextNumber = res.data.nextNumber;
						this.nextIssue = res.data.nextIssue;
						this.config = res.data.config;
					}else{
						uni.$u.toast(res.message);
					}
				})
			},
			initCategory(){
				getCategoryInfo({alias:this.lotteryAlias}).then(res=>{
					if(res.code === 200) {
						this.category = res.data.category;
						this.kaijiang = res.data.kaijiang;
					}else{
						uni.$u.toast(res.message);
					}
				})
			},
			initRules(){
				getRules({typeid:this.typeid}).then(res=>{
					if(res.code === 200) {
						this.rules = res.data.rules;
						this.montageRuleData();
					}else{
						uni.$u.toast(res.message);
					}
				})
			},
			montageRuleData(){
				this.rules.forEach(item=>{
					item.children.forEach(vl=>{
						if(vl.alias == this.rulesActive) {
							this.rulesInfo = vl;
							this.rulesInfo['pid_name'] = item.title;
							if(vl.children && vl.children.length > 0) {
								this.rulesData = vl.children
							}else{
								this.rulesData = [];
							}
							
						}
					})
				})
			},
			checkChildrenNav(item){
				this.rulesActive = item.alias;
				this.montageRuleData();
			},
			//倒计时更新
			onChange(e){
				this.timeData = e
			},
			//倒计时结束
			onFinish(){
				if(!this.nextIssue) {
					return false;
				}
				var map = {
					issue : this.nextIssue,
					alias : this.lotteryAlias,
					typeid : this.typeid,
				}
				getDrawprizeInfo(map).then(res=>{
					if(res.code === 200) {
						console.log(res.data);
						if(res.data.drawprize) {
							this.drawprize = res.data.drawprize;
							this.nextNumber = res.data.nextNumber;
							this.nextIssue = res.data.nextIssue;
							this.kaijiang = res.data.kaijiang;
						}else{
							setTimeout(()=>{
								this.onFinish();
							},3000);
						}
					}else{
						uni.$u.toast(res.message);
					}
				})
			},
			sectionChange(e){
				this.subsectionActive = e;
			},
			checkRoute(_url,_params={}){
				uni.$u.route({
					url:_url,
					params:_params
				});
			},
			onAddOrder(e) {
				this.isAddOrder = e;
			},
			onsubmitOrder(e,obj){
				if(!e) {
					this.isAddOrder = false;
					uni.$u.toast(obj.message);
					return false;
				}
				this.isAddOrder = false;
				this.orderList.unshift(obj);
			},
		},
		onPullDownRefresh() {
			//下拉刷新
			this.list[this.tabIndex] = [];
			this.lotteryList();
			 uni.stopPullDownRefresh();
			 
		},
	}
</script>

<style lang="scss">
	/* #ifndef APP-PLUS */
	page {
	  width: 100%;
	  min-height: 100%;
	  display: flex;
	}
	/* #endif */
	.container{
		display: flex;
		flex: 1;
		flex-direction: column;
		// overflow: hidden;
		background-color: #ffffff;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
		margin: 10rpx;
		&__sticky{
			background-color: #ffffff !important;
			border-bottom: 1px solid #C0C0C0;
			margin-bottom: 10rpx;
			border-bottom-left-radius: 20rpx; /*左上角*/
			border-bottom-right-radius: 20rpx; /*右上角*/
			&__draw-ul{
				height:150rpx;
				&__title{
					font-weight: bold;
					font-size: 28rpx;
					margin: 10rpx ;
				}
				&__more{
					font-size: 22rpx;
					float:right;
				}
				&__jia{
					font-size: 40rpx;
					line-height: 75rpx;
				}
				&__li{
					width:12.5%;
					text-align: center;
					font-weight: bold;
					float: left;
					&__code{
						width: 50rpx;
						height: 50rpx;
						border-radius: 100%;
						margin: 0 auto;
						color:#FFFFFF;
						line-height: 50rpx;
						font-size: 28rpx;
					}
				}
			}
			
			&__down-ul{
				display: flex;
				flex-direction: row;
				padding:20rpx ;
				font-weight: bold;
				font-size: 28rpx;
				&__left{
					width: 50%;
				}
				&__right{
					width: 50%;
					text-align: right;
				}
			}
		}
		
		
		&__nav{
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			padding-left: 40rpx;
		}
		
		&__nav_active{
			background-color:#dd6161;
			color:#FFFFFF;
		}
	
	}
	.lhc{
		overflow: auto;
		height: calc(100vh - 88rpx);
		&__rule-left{
			height: calc(100vh - 600rpx);
		}
		&__rule-right{
			height: calc(100vh - 600rpx);
		}
	}
</style>